<template>
    <div class="pad">
        <!-- search start -->
        <searchBar
                placeHolder="请输入公司名称"
            @handleSearch="init"
        />
        <!-- search end -->

        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            v-loading="loading"
            :pageCount="tableData.rows"
            @handleDetail="handleDetail"
        />
        <!-- table end -->

        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDialog"
            center
            title="维修厂详情"
            width="45%"
            v-el-drag-dialog
        >
            <div class="detailPar" v-loading="detailLoading">
                <div class="left">
                    <el-form
                            class="detail"
                            label-width="100px"
                    >
                        <el-form-item label='营业执照:'>
                            <img :src="detailData.license" />
                        </el-form-item>
                        <el-form-item label='维修厂图片:'>
                            <img :src="photo" />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <el-form label-width="100px">
                        <el-form-item label="维修厂简介:">
                            {{detailData.about}}
                        </el-form-item>
                        <el-form-item label="维修厂主修:">
                            {{detailData.major}}
                        </el-form-item>
                        <el-form-item label="开户行:">
                            {{detailData.bank}}
                        </el-form-item>
                        <el-form-item label="开户分行:">
                            {{detailData.branch}}
                        </el-form-item>
                        <el-form-item label="开户名:">
                            {{detailData.account_name}}
                        </el-form-item>
                        <el-form-item label="银行卡号:">
                            {{detailData.account}}
                        </el-form-item>
                        <el-form-item label="地址:">
                            {{detailData.province}}{{detailData.city}}{{detailData.county}}{{detailData.address}}
                        </el-form-item>
                        <el-form-item label="运营商">
                            {{detailData.agent_company}}
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    export default {
        name: "throughdownList",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '公司名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '审核时间',
                        prop: 'audit_time'
                    },
                    {
                        label: '详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    }
                ],
                loading: false,
                isShowDialog: false,
                detailData: {},
                photo: '',
                detailLoading: false
            }
        },
        methods: {
            async init (search = '') {  //初始化
                this.loading = true;
               if( search ) {
                   search['key'] = search['search'];
                   delete search['search']
               }
                let paramsStr = Object.assign(search,{page: this.page, pageSize: this.pageSize});
                let res = await this.api.log_shopList_(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail (...value) { //详情
                this.detailLoading = true;
                this.isShowDialog = true;
                let res = await this.api.getShopDetail({sid: value[1]['id']});
                if(res.code) {
                    this.detailData = res.data;
                    this.photo = res.data.photo[0] || '';
                    setTimeout(() => {
                        new Viewer(document.querySelector('.detailPar'))
                    },500)
                    this.detailLoading = false;
                }else this.$message(res.msg);
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            page () {
                this.init()
            },
            pageSize () {
                this.init()
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding:10px;
    }
    .detail img {
        width:100px;
    }

    .detailPar {
        overflow:hidden;
        border:solid 1px #efefef;
    }
    .detailPar .left {
        float:left;
        width:40%;
        padding-left:5px;
        padding-top:15px;
    }
    .detailPar .right {
        width:60%;
        height:370px;
        border-left:solid 1px #efefef;
        float:left;
        padding-left:15px;
        padding-top:10px;
        overflow:auto;
    }
    .detailPar .right .el-form-item {
        margin-bottom:5px;
    }
    .detailPar img {
        cursor:pointer;
    }
    .pad >>> .viewer-container {
        z-index:8000;
    }
</style>
